<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
        }

        .bg {
            background: url(../assets/imgs/山019.jpg) no-repeat;
            width: 100%;
            height: 100vh;
            background-size: cover;
            position: fixed;
            filter: blur(3px); /* 高斯模糊 */
        }

        .mask {
            width: 330px;
            height: 220px;
            margin-top:10%;
            background-image: url(../assets/imgs/山020.jpg);
            background-size: cover;
            -webkit-mask-size: cover;
            -webkit-mask: url(../assets/imgs/山020.jpg);
            -webkit-mask-size: cover;
            animation: move 10s infinite;
        }

        @keyframes move {
            0% {
                background-position: 0 0;
            }

            50% {
                background-position: 100% 0;
            }
        }
    </style>
</head>
<body>

<!--今天介绍CSS的mask属性，即遮罩属性-->
<!--它可以用于隐藏或部分隐藏一个元素的可见区域，类似于PS中的遮罩概念-->
<!--对于遮罩-->
<!--如果元素添加了遮罩属性，那么目标元素将会按照遮罩的形状来显示-->
<!--遮罩透明的区域，元素也会透明，即该区域被隐藏-->
<!--通常，遮罩可以是透明的图片或者是带渐变的元素-->

<div class="bg"></div>
<div class="mask"></div>
</body>
</html>